<style scoped>
.el-row {
  margin-bottom: 20px;
}

.custom-input .el-input__inner {
  padding-right: 30px;
  /* Adjust padding for search icon */
}

.custom-input .el-input__suffix {
  right: 10px;
  /* Adjust the position of the search icon */
}

.custom-icon {
  font-size: 16px;
  line-height: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {

  .el-col-4,
  .el-col-8,
  .el-col-12 {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }

  .el-row .el-col {
    margin-bottom: 10px;
  }

  .el-button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>

<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <!-- 第一部分 -->
      <el-col :span="4">
        <p style="font-weight: 800; font-size: 16px; margin: 0; padding: 0;">用户用户列表</p>
        <p style="font-size: 12px; color: #666; margin: 0; padding: 0;">共 {{ totalUsers }} 人</p>
      </el-col>
      <!-- 第二部分 -->
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input v-model="searchUnit" placeholder="请输入工作单位进行搜索" size="small" class="custom-input">
              <template slot="suffix">
                <i class="el-icon-search custom-icon"></i>
              </template>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input v-model="searchName" placeholder="请输入姓名进行搜索" size="small" class="custom-input">
              <template slot="suffix">
                <i class="el-icon-search custom-icon"></i>
              </template>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input v-model="searchAccount" placeholder="请输入账号进行搜索" size="small" class="custom-input">
              <template slot="suffix">
                <i class="el-icon-search custom-icon"></i>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </el-col>
      <!-- 第三部分 -->
      <el-col :span="8" style="text-align: right;">
        <el-button type="primary" @click="handleAddUser">+添加移动用户</el-button>
        <el-button type="danger" @click="handleBulkDisable">批量停用</el-button>
        <el-button type="success" @click="handleBulkEnable">批量启用</el-button>
      </el-col>
    </el-row>
    <el-table :data="filteredUsers" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="hospName" label="工作单位" width="180"></el-table-column>
      <el-table-column prop="account" label="账号" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="department" label="科室" width="180"></el-table-column>
      <el-table-column prop="createTime" label="注册日期" width="180"></el-table-column>
      <el-table-column prop="testSubjects" label="管理受试者" width="180">
        <template slot-scope="scope">
          <el-link type="primary">{{ scope.row.testSubjects }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="mini">编辑</el-button>
          <el-button @click="handleToggleStatus(scope.row)" :type="scope.row.status === 0 ? 'danger' : 'success'"
            size="mini">
            {{ scope.row.status === 0 ? '停用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加用户" :visible.sync="showAddDialog">
      <el-form :model="newUser">
        <el-form-item label="账号">
          <el-input v-model="newUser.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newUser.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newUser.name"></el-input>
        </el-form-item>
        <el-form-item label="工作单位">
          <el-select v-model="newUser.workplaceId" placeholder="请选择工作单位" @change="getRHosp(newUser.workplaceId)">
            <el-option label="云南省第一人民医院" value="1"></el-option>
            <el-option label="玉溪市人民医院" value="2"></el-option>
            <el-option label="普洱市人民医院" value="3"></el-option>
            <el-option label="镇雄县人民医院" value="4"></el-option>
            <el-option label="保山市人民医院" value="5"></el-option>
            <el-option label="个旧市人民医院" value="6"></el-option>
            <el-option label="西双版纳州人民医院" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="newUser.department"></el-input>
        </el-form-item>
        <el-form-item label="研究项目">
          <el-select v-model="newUser.researchId" placeholder="请选择研究项目">
            <el-option v-for="item in options" :key="item.id" :label="item.sname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmAddUser">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑用户" :visible.sync="showEditDialog">
      <el-form :model="editUser">
        <el-form-item label="账号">
          <el-input v-model="editUser.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editUser.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editUser.name"></el-input>
        </el-form-item>
        <el-form-item label="工作单位">
          <el-select v-model="editUser.workplaceId" placeholder="请选择工作单位" @change="getRHosp(editUser.workplaceId)">
            <el-option label="云南省第一人民医院" value="1"></el-option>
            <el-option label="玉溪市人民医院" value="2"></el-option>
            <el-option label="普洱市人民医院" value="3"></el-option>
            <el-option label="镇雄县人民医院" value="4"></el-option>
            <el-option label="保山市人民医院" value="5"></el-option>
            <el-option label="个旧市人民医院" value="6"></el-option>
            <el-option label="西双版纳州人民医院" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="editUser.department"></el-input>
        </el-form-item>
        <el-form-item label="研究项目">
          <el-select v-model="editUser.researchId" placeholder="请选择研究项目">
            <el-option v-for="item in options" :key="item.id" :label="item.sname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmEditUser">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listAppUser, changeUserStatus2, getRes, addAppUser, addAppRu, updateRu, updateNewApp } from "@/api/appUser/appUser";

export default {
  data() {
    return {
      totalUsers: 0,
      options: [],
      searchUnit: '',
      searchName: '',
      searchAccount: '',
      users: [
        // 添加更多示例用户数据
      ],
      showAddDialog: false,
      showEditDialog: false,
      newUser: {
        account: '',
        password: '',
        name: '',
        workplaceId: '',
        department: '',
        researchId: '',
        createTime: ''
      },
      editUser: {
        account: '',
        password: '',
        name: '',
        workplaceId: '',
        department: '',
        researchId: '',
      }
    }
  },
  created() {
    this.getList();
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => {
        return (
          user.hospName.includes(this.searchUnit) &&
          user.name.includes(this.searchName) &&
          user.account.includes(this.searchAccount)
        )
      })
    }
  },
  methods: {
    getList() {
      listAppUser(this.queryParams).then(response => {
        this.users = response.rows;
        this.totalUsers = response.rows.length;
        console.log(this.appUserList)
        this.newUser = { account: '', password: '', name: '', workplaceId: '', department: '', researchId: '' }
      });
    },
    getRHosp(id) {
      console.log(id)
      getRes(id).then(response => {
        this.options = response;
        console.log(this.options)
      });
    },
    handleAddUser() {
      this.showAddDialog = true
    },
    confirmAddUser() {
      console.log(this.newUser)
      addAppUser(this.newUser).then(res => {
        console.log("添加完毕")
        addAppRu(this.newUser).then(res => {
          console.log(res)
          this.showAddDialog = false
          this.getList();
        })
      })
    },
    handleEdit(user) {
      if (user.workplaceId === 1) {
        user.workplaceId = "云南省第一人民医院"
      }
      if (user.workplaceId === 2) {
        user.workplaceId = "玉溪市人民医院"
      }
      if (user.workplaceId === 3) {
        user.workplaceId = "普洱市人民医院"
      }
      if (user.workplaceId === 4) {
        user.workplaceId = "镇雄县人民医院"
      }
      if (user.workplaceId === 5) {
        user.workplaceId = "保山市人民医院"
      }
      if (user.workplaceId === 6) {
        user.workplaceId = "个旧市人民医院"
      }
      if (user.workplaceId === 7) {
        user.workplaceId = "西双版纳州人民医院"
      }
      this.editUser = { ...user }
      this.showEditDialog = true
    },
    confirmEditUser() {
      if (this.editUser.workplaceId === "云南省第一人民医院") {
        this.editUser.workplaceId = 1
      }
      if (this.editUser.workplaceId === "玉溪市人民医院") {
        this.editUser.workplaceId = 2
      }
      if (this.editUser.workplaceId === "普洱市人民医院") {
        this.editUser.workplaceId = 3
      }
      if (this.editUser.workplaceId === "镇雄县人民医院") {
        this.editUser.workplaceId = 4
      }
      if (this.editUser.workplaceId === "保山市人民医院") {
        this.editUser.workplaceId = 5
      }
      if (this.editUser.workplaceId === "个旧市人民医院") {
        this.editUser.workplaceId = 6
      }
      if (this.editUser.workplaceId === "西双版纳州人民医院") {
        this.editUser.workplaceId = 7
      }
      updateNewApp(this.editUser).then(res => {
        console.log("修改完毕")
        updateRu(this.editUser).then(res => {
          console.log(res)
          this.showEditDialog = false
          this.getList();
        })
      })
    },
    handleToggleStatus(user) {
      user.status = user.status === 0 ? 1 : 0
      changeUserStatus2(user.id, user.status).then(res => {
        console.log("修改了")
      })
    },
    handleBulkDisable() {
      this.users.forEach(user => {
        user.status = 1
        changeUserStatus2(user.id, user.status).then(res => {
          console.log("修改了")
        })
      })
    },
    handleBulkEnable() {
      this.users.forEach(user => {
        user.status = 0
        changeUserStatus2(user.id, user.status).then(res => {
          console.log("修改了")
        })
      })
    }
  }
}
</script>
